<template>
  <el-row type="flex" justify="space-between" align="middle" class="tools">
    <div class="left">
      <el-button type="primary" :icon="collapse ? 'el-icon-fa-indent' : 'el-icon-fa-outdent'" @click="toggleCollapse"/>
    </div>
    <div class="right">
      <div>
        <i class="el-icon-fa-user"></i>
        你好,
        <el-dropdown @command="dispatch">
          <span class="el-dropdown-link">
            {{user.username}}
            <i class="el-icon-fa-chevron-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="updatePass">
              <i class="el-icon-fa-lock"></i>
              修改密码
            </el-dropdown-item>
            <el-dropdown-item command="logout">
              <i class="el-icon-fa-sign-out"></i>
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-dialog title="修改密码" :visible.sync="passwordVisible" width="420px">
        <el-form ref="form" :model="pass" :rules="rules" label-width="80px">
          <el-form-item label="原密码" prop="password">
            <el-input type="password" v-model="pass.password" />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" v-model="pass.newPassword" />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirm">
            <el-input type="password" v-model="pass.confirm" />
          </el-form-item>
        </el-form>
      <div slot="footer">
        <el-button @click="cancelPass">取 消</el-button>
        <el-button @click="submitPass" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
  import { mapActions, mapState } from "vuex";
  import { CLEAR_TOKEN, TOGGLE_COLLAPSE } from "@/config/store/mutation-types";
  import { url, util } from "@/config";

  export default {
    name: "header-bar",
    props: {
      user: Object
    },
    data() {
      return {
        pass: {},
        rules: {
          password: {
            required: true,
            message: "请输入原密码",
          },
          newPassword: [
            { required: true, message: "请输入新密码" },
            { min: 6, message: "请至少输入6位密码" },
          ],
          confirm: {
            validator: this.confirmPass
          }
        },
        passwordVisible: false,
      };
    },
    computed: mapState(["collapse"]),
    methods: {
      ...mapActions([CLEAR_TOKEN, TOGGLE_COLLAPSE]),
      confirmPass(rule, val, cb) {
        if (!val) {
          return cb("请输入确认密码");
        }
        if (this.pass.newPassword !== val) {
          return cb("与新密码不一致");
        }
        cb();
      },
      cancelPass() {
        this.passwordVisible = false;
        this.$refs.form.resetFields();
      },
      updatePass() {
        this.passwordVisible = true;
      },
      submitPass() {
        const { validate } = this.$refs.form;
        validate(success => {
          if (!success) {
            return;
          }
          this.password(this.pass.password, this.pass.newPassword).then(err => {
            if (err) {
              this.$message.error(err);
              return;
            }
            this.logout();
          });
        });
      },
      dispatch(command) {
        const fn = this[command];
        if (!util.isFunction(fn)) {
          return;
        }
        fn();
      },
      password(password, newPassword) {
        return this.axios.post(url.system.user.password, null, {
          params: { password, newPassword }
        }).then(result => {
          if (!util.isSuccess(result.code)) {
            return Promise.resolve(result.msg || "修改失败");
          }
          return Promise.resolve("");
        });
      },
      logout() {
        this[CLEAR_TOKEN]();
        this.$router.push("/login");
      }
    }
  };
</script>

<style scoped lang="less">
  .tools {
    .left {
      line-height: 60px;
    }
  }

  .el-dropdown {
    color: inherit;
    font-size: inherit;
  }
</style>
